import { PureComponent } from "react"
import { connect } from "react-redux"
import { fetchDataListAction } from "../../../store/actionCreators"

class Com2 extends PureComponent {
  componentDidMount() {
    const { fetchRecommendList } = this.props
    fetchRecommendList()
  }
  render() {
    const { recommendList } = this.props
    return (
      <div>
        <ul>
          <h3>recommends:</h3>
          {recommendList.map((recommend, index) => (
            <li key={index}>{recommend.title}</li>
          ))}
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  // 函数一
  recommendList: state.recommendList // 表示用到哪些数据才会逼迫页面更新，
  // 也就是实际原理的setState中传递的数据就是类似这里的recommendList这个key
  // 后面的state.recommendList是redux数据源
})
const mapDispatchToProps = (dispatch) => ({
  // 函数二
  // 这个是props里可以结构出来的函数，内部做了dispatch一个action的动作
  fetchRecommendList: function () {
    dispatch(fetchDataListAction())
  }
})
// connect高阶函数将redux和react数据连接
export default connect(mapStateToProps, mapDispatchToProps)(Com2)
